<script setup>
import { useRequest } from '@/hooks/requestHooks.js';
import { getNoticeList } from '@/api/index.js';
import { TableList } from '@/components/MainComponents.js';
const columnObj = {
  index: true,
  columnData: [
    { text: true, prop: 'msgTime', label: '通知时间' },
    { text: true, prop: 'enterpriseName', label: '机构名称' },
    { text: true, prop: 'msgContent', label: '内容简介' },
  ],
};
const msgRef = ref(null);
const tableHeight = ref(null);
const queryData = ref({
  msgTimeStart: null,
  msgTimeEnd: null,
  pageNum: 1,
  pageSize: 10,
});
const dateRange = ref([]);
const dateChange = val => {
  queryData.value.msgTimeStart = val?.[0] ?? null;
  queryData.value.msgTimeEnd = val?.[1] ?? null;
};
const handleQuery = () => {
  queryData.value.pageNum = 1;
  run(queryData.value);
};

const getList = e => {
  queryData.value.pageNum = e.page;
  queryData.value.pageSize = e.limit;
  run(queryData.value);
};

const [res, loading, run] = useRequest(getNoticeList, {
  defaultParams: [queryData.value],
});

onMounted(() => {
  nextTick(() => {
    tableHeight.value = msgRef.value.clientHeight - 187;
  });
});
</script>

<template>
  <div ref="msgRef" class="app-container">
    <el-form ref="queryForm" :model="queryData" inline class="u-base-fg u-p20 u-mb20">
      <el-form-item label="通知时间" prop="deviceType">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          size="mini"
          align="left"
          style="width: 240px"
          @change="dateChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="u-base-fg u-p20">
      <TableList
        v-loading="loading"
        :total="res?.total ?? 0"
        :height="tableHeight"
        :tableData="res?.rows ?? []"
        :pageObj="queryData"
        :columObj="columnObj"
        @getList="getList"
      ></TableList>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
  .el-form-item__content {
    height: 40px;
    line-height: 40px;
  }
}
</style>
